<template>
	<view class="container">
		<!-- 头部轮播 -->
		<!-- 背景色区域 -->
		<image src="https://unimall-demo.oss-cn-shenzhen.aliyuncs.com/bg/8c8463646969403e82f97eba1119d9cd.png" class="top-img img1"></image>
		<image src="https://unimall-demo.oss-cn-shenzhen.aliyuncs.com/bg/cc2e5f1ddf44472aa31e0695e954de89.png" class="top-img img2" mode="heightFix"></image>
		<image src="https://unimall-demo.oss-cn-shenzhen.aliyuncs.com/bg/7eb19974b021402180acd2a0c3ecfa6b.png" class="top-img img3"></image>
		<image src="https://unimall-demo.oss-cn-shenzhen.aliyuncs.com/bg/cc2e5f1ddf44472aa31e0695e954de89.png" class="top-img img4"></image>
		<image src="https://unimall-demo.oss-cn-shenzhen.aliyuncs.com/bg/7eb19974b021402180acd2a0c3ecfa6b.png" class="top-img img5"></image>
		<view class="content-box">
			<view class="swiper-box">
				<swiper :autoplay="true" interval="3000" duration="500" class="carousel" circular @change="swiperChange">
					<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToWebview(item.link)">
						<view :style="'background-image:url('+item.image+')'" class="img-box"></view>
					</swiper-item>
				</swiper>
				<view class="swiper-dots">
					<text class="num">{{swiperCurrent+1}}</text>
					<text class="sign">/</text>
					<text class="num">{{swiperLength}}</text>
				</view>
			</view>
			<view class="weather-box" v-if="weather">
				<view class="flexBottom">
					<image src="/static/icon/weather.png" class="icon"></image>
					<text>当前温度：{{weather.temp}}℃</text>
					<text class="time">{{currDate}}</text>
				</view>
				<view class="intro">
					<text>温度变化：{{weather.tempMax + '℃~' + weather.tempMin+'℃'}}</text>
					<text>pm25值：{{weather.pm2p5}}</text>
				</view>
				<view class="intro">
					<text>风力：{{weather.windScale}}级</text>
					<text>湿度：{{weather.humidity}}%</text>
				</view>
			</view>
			<view class="enterprise-intro">
				<view class="inner">
					<image src="https://unimall-demo.oss-cn-shenzhen.aliyuncs.com/bg/72903c11a7b349bd9548ba8f4a036ec9.png" class="left-line"></image>
					<image src="https://unimall-demo.oss-cn-shenzhen.aliyuncs.com/bg/0e1db120fced474c9469f897591804d1.png" class="right-line"></image>
					<view class="cont">
						<image :src="logo" class="logo-img" mode="widthFix"></image>
						<view class="text">
							<u-parse className="rich-img" :content="info"></u-parse>
						</view>
					</view>
				</view>
			</view>
			<view class="reason-box">
				<image :src="item" v-for="item in reasonImg" class="widthFix-img" mode="widthFix"></image>
			</view>
			<view class="imgshow-box">
				<view class="common-title">
					<image src="/static/icon/icon_title.png"></image>
					<text>产品展示</text>
					<image src="/static/icon/icon_title.png"></image>
				</view>
				<!-- <view class="imgshow-text">图片展示</view> -->
				<view class="imgshow-imgsbox">
					<image  v-for="(item,index) in imgsshowList" :key="index" :src="item.imageUrl" mode="aspectFill" class="imgshow-imgs" @click="imgsClick(index)"></image>
				</view>
			</view>
			
			<view class="news-intro">
				<view class="common-title">
					<image src="/static/icon/icon_title.png"></image>
					<text>新闻资讯</text>
					<image src="/static/icon/icon_title.png"></image>
				</view>
				<view class="news-list">
					<navigator class="more-btn" url="/pages/enterprise/newslist">MORE ></navigator>
					<view class="item" v-for="(item,index) in newsList">
						<image src="/static/icon/lingxing.png"></image>
						<text  @click="navToDetailPage(item.id)">{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="news-intro">
				<view class="common-title">
					<image src="/static/icon/icon_title.png"></image>
					<text>政策解读</text>
					<image src="/static/icon/icon_title.png"></image>
				</view>
				<view class="news-list">
					<navigator class="more-btn" url="/pages/enterprise/zhengcelist">MORE ></navigator>
					<view class="item" v-for="(item,index) in zhengceList">
						<image src="/static/icon/lingxing.png"></image>
						<text  @click="navToDetailPage(item.id)">{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="footer-cont">
				<footer-cont></footer-cont>
			</view>
			  <view>
			         <view class="page-body">
			             <view class="page-section page-section-gap">
			                 <map style="width: 90%; height: 200px;margin: 30rpx auto 0" :latitude="latitude" :longitude="longitude" :markers="covers" :scale="scale" >
			                 </map>
			             </view>
			         </view>
			     </view>
			<view class="qr-box">
				<image :src="qrcode"></image>
				<view>扫一扫获取更多内容</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue'
	import footerCont from '@/components/footer-module.vue'
	export default {
		components: {
			uParse,
			footerCont
		},
		data() {
			return {
				carouselList: [],
				newsList:[],
				zhengceList:[],
				logo:'',
				info:'',
				swiperCurrent:0,
				swiperLength:0,
				qrcode:'',
				reasonImg:[],
				weather:{},
				currDate:'',
				imgsshowList:[],
				
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../static/location.png',
					rotate:0,   // 旋转度数
				 　　width:26,   //宽
				 　　height:36,   //高
				}],
				scale:14,//地图层级
			};
		},
		onShow() {
			
		},
		onLoad(options) {
			const that = this
			that.loadData()
			uni.getLocation({
			    type: 'wgs84',
			    success: function (res) {
					that.loadData({lng:res.longitude,lat:res.latitude})
			    },
				complete:function(res){
					that.loadData()
				}
			});
		},
		onShareAppMessage() {
			const that = this
			return {
				title: '秋歌体验田',
				imageUrl: 'https://unimall-demo.oss-cn-shenzhen.aliyuncs.com/bg/bdc1a7bc3b064f51ae26f9f966b26c76.jpg',
				path: '/pages/enterprise/index'
			}
		},
		methods: {
			loadData(data={}) {
				const that = this
				uni.showLoading({
					title: '正在加载'
				})
				//企业介绍
				that.$api.request('enterprise', 'info', data,failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					let data = JSON.parse(res.data)
					if(data.company_location_remark) {
						 const laLg = data.company_location_remark.split(',')
						 that.latitude = laLg[0]
						 that.longitude = laLg[1]
						 that.covers[0].latitude = laLg[0]
						 that.covers[0].longitude = laLg[1]
					} else {
						that.latitude = 34.042935
						that.longitude = 117.597068
						that.covers[0].latitude = 34.042935
						that.covers[0].longitude =  117.597068
					}
					that.carouselList = JSON.parse(data.banner)
					that.swiperLength = that.carouselList.length
					that.logo = data.logo
					that.info = data.info
					that.qrcode = data.wechat
					that.reasonImg = JSON.parse(data.other)
					let myDate = new Date()
					let month = myDate.getMonth() + 1
					month = month < 10 ? 0+month : month
					let day = myDate.getDate()
					day = day < 10 ? 0+day : day
					that.currDate = myDate.getFullYear() + '年' + month + '月' + day + '日'
					if(data.weather){
						that.weather = JSON.parse(data.weather)
					}
					uni.hideLoading()
				})
				that.$api.request('news', 'home', failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					let data = res.data
					that.newsList = data
					uni.hideLoading()
				})
				that.$api.request('news', 'home',{"category":"2"}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					// debugger
					let data = res.data
					that.zhengceList = data
					uni.hideLoading()
				})
				that.$api.request('enterprise', 'productInfo', failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
 					that.imgsshowList = res.data
 					uni.hideLoading()
				})
			},
			//轮播图切换
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
			//详情页
			navToDetailPage(id) {
				uni.navigateTo({
					url: `/pages/enterprise/newsdetail?id=${id}`
				})
			},
			navToWebview(url){
				if(url){
					uni.navigateTo({
						url: `/pages/webview/index?url=${url}`
					})
				}
			},
			imgsClick(index) {
				uni.navigateTo({
					url: `/pages/enterprise/imgslist?id=${index}`
				})
			}
		}
	}
</script>

<style lang="less">
	@import 'commonStyle.less';
	.csssprite{
		width: 100upx!important;
		height: 120upx!important;
		min-height: 120upx!important;
		min-width: 100upx!important;
	}
	.container{
		position: relative;
		background-color: #3AA26A;
		color: #ffffff;
		overflow-x: hidden;
	}
	.flexBottom{
		display: flex;
		align-items: flex-end;
	}
	.top-img{
		position: absolute;
		left:0;
		right:0;
		width:100%;
		z-index: 1;
		&.img1{
			top:0;
			height:431upx;
		}
		&.img2{
			top: 431upx;
			height:296upx;
		}
		&.img3{
			top: 1200upx;
			height:777upx;
		}
		&.img4{
			bottom: 0;
			height:682upx;
		}
		&.img5{
			bottom: 682upx;
			height:777upx;
		}
	}
	.content-box{
		position: relative;
		z-index: 2;
		min-height: 100%;
	}
	.swiper-box{
		position: relative;
		margin-top: 44upx;
		overflow: hidden;
		swiper{
			height:400upx;
		}
		swiper-item{
			padding:0 20upx;
		}
		.img-box{
			width:100%;
			height:100%;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			border-radius: 20upx;
		}
	}
	.weather-box{
		margin-top: 42upx;
		padding:0 63upx;
		font-size: 24upx;
		color:#fff;
		.icon{
			width:63upx;
			height:48upx;
			margin-right:20upx;
		}
		.time{
			margin-left:auto;
		}
		.intro{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 26upx;
			text:not(:last-child){
				margin-right:10upx;
			}
		}
	}
	.logo-img{
		width:100%;
	}
	.enterprise-intro{
		position: relative;
		margin: 32upx 30upx 0;
		padding:27upx 20upx 97upx;
		background-color: #0F7643;
		background-image:url('https://unimall-demo.oss-cn-shenzhen.aliyuncs.com/bg/9ae16d9c0b4e47119123abc16a1972d8.png');
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius: 10upx;
		.inner{
			position: relative;
			padding:45upx 40upx 40upx 40upx;
			background-color: #fff;
			border-radius: 10upx;
			.line{
				position: absolute;
				z-index: 1;
			}
			.left-line{
				.line;
				width:268upx;
				height: 207upx;
				top:0;
				left:-134upx;
			}
			.right-line{
				.line;
				width:168upx;
				height: 295upx;
				bottom:40upx;
				right:-84upx;
			}
			.cont{
				position: relative;
				z-index: 2;
			}
			.text{
				margin-top: 20upx;
				font-size: 24upx;
				color:#3AA26A;
				line-height: 40upx;
			}
		}
	}
	
	.common-title{
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width:34upx;
			height: 24upx;
		}
		text{
			padding:0 40upx;
			font-size: 36upx;
			font-weight: bold;
		}
	}
	.widthFix-img{
		width:100%;
	}
	.reason-box{
		margin-top: 45upx;
		padding:0 40upx;
		text-align: center;
		image{
			margin-bottom: 33upx;
			&:last-child{
				margin-bottom: 0;
			}
		}
	}
	.imgshow-box{
		margin: 45upx 0;
		padding:0 40upx;
		text-align: center;
		.imgshow-text{
			font-size: 36upx;
			padding: 0 0 10upx 0;
		}
		.imgshow-imgsbox{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			margin-top: 18upx;
			.imgshow-imgs{
				width: 315upx;
				height: 315upx!important;
				margin: 10rpx;
			}
			// .imgshow-imgs:last-child{
			// 	width: 30%!important;
			// 	margin: 0 auto;
			// }
		}
	}
	.news-intro{
		padding-top: 53upx;
		margin: 22upx 40upx 0 40upx;
		background-color: #ffffff;
		border-radius: 8upx;
		background-image: url('https://unimall-demo.oss-cn-shenzhen.aliyuncs.com/bg/4f583ba6328e4c0aa17fb447c869a6d5.png');
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		.common-title{
			color: #006D32;
		}
		.news-list{
			position: relative;
			margin-top: 64upx;
			padding:0 0 80upx 54upx;
			image{
				width: 14upx;
				height: 14upx;
				margin-right: 30upx;
			}
			.item{
				color: #3AA26A;
				font-size: 24upx;
				&:not(:last-child){
					margin-bottom: 44upx;
				}
			}
			.more-btn{
				position: absolute;
				right:40upx;
				bottom:20upx;
				color: #006D32;
				font-size: 26upx;
				font-weight: bold;
				z-index:2;
			}
		}
	}

	.qr-box{
		padding:45upx 0 62upx;
		text-align: center;
		font-size: 24upx;
		color: #fff;
		image{
			width: 150upx;
			height: 150upx;
			margin-bottom: 32upx;
		}
	}
	.rich-img {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
	}
	.footer-cont{
		margin: 20upx 40upx 0 40upx;
	}
	video{
		width: 276px!important;
	}
</style>
